import React, { useState } from 'react'

export default function App() {
    console.log('App run');
    // console.log('App this: ',this);// 函数组件没有this
    /**
     * 函数组件本身不能定义状态数据  16.8
     * Hook 【钩子】
     * useState: 功能就是让函数组件有状态数据
     * 语法：
     * let [变量,设置新值的函数] = useState(初始值)
     * 
     * 设置状态的函数调用
     * 1. 状态的值被设置为新值
     * 2. 函数组件重新render
     */
    let [count, setCount] = useState(100); // count状态数据， setCount 改变该状态的函数
    let [msg, setMsg] = useState('atguigu');
    return (
        <div>
            <p>count: {count}</p>
            <p>msg: {msg}</p>
            <p><button onClick={() => {
                // 参数，就是要改的最新状态值
                setCount(count + 1);
            }}>count++</button></p>

            <p><button onClick={()=>{
                setMsg(msg + '-')
            }}>msg --</button></p>
        </div>
    )
}
